<template>
	<div id="city">
		<div id="city-header">
			<p class="iconfont icon-fanhui" @click="test()"></p>
			<span class="title">热门搜索</span>
		</div>
		<div id="searchtop">
			<input type="search" name="search" id="search" value="" placeholder="请输入搜索关键词" v-model="search"/>
			<input type="button" name="btn" id="btn" value="取消" />
			<ul id="list">
				<li v-for="(item, index) in list" :key = "index" >
					{{item}}
				</li>
			</ul>
			<strong class="iconfont icon-sousuo"></strong>
		</div>
		<div id="move">
		<mt-swipe :auto="4000" style="width: 100%;">
 			 <mt-swipe-item ><img src="~@/assets/banner1.jpg" 				style="width:375px;height:200px;"></mt-swipe-item>
  			 <mt-swipe-item><img src="~@/assets/banner2.jpg" style="width:375px;height:200px;" 				/></mt-swipe-item>
		</mt-swipe>
	</div>
		<div id="hotSerch">
				<router-link v-for="(item, index) in keywords" to="item" key="index">{{item}}</router-link>
			</div>
	</div>
	
</template>

<script>
	import { Swipe, SwipeItem } from 'mint-ui';
	import Vue from "vue"
	import { Toast } from 'mint-ui';
	import $            from "jquery"
	import footerToggle from "@/md/footerToggle.js"
	import headerToggle from "@/md/headerToggle.js"
	export default{
		data(){
			return{
				search : "",
				list:[],
				keywords:["雷神3","正义联盟","狂兽","寻梦环游记","相爱相亲"]
			}
		},
		mounted(){
			footerToggle.show();
			headerToggle.hide();
			$(function(){
				$("#search").focus(function(){
					$("#list").css("display","block");
					$('#btn').css({
						"display":"block",
						float:'right'
					});
					$(this).css("width","60%");
					$('#btn').click(function(){
						var search = $("#search").val('');
						$("#search").css("width","80%");
						$('#btn').css('display',"none");
					})
				})
				$("#search").blur(function(){
					$("#list").css("display","none");
				})
			})
		},
		methods:{
			test(){
				window.history.go(-1);
			}
		},
		components:{
			
		},
		watch:{
			search:function(newVal){
				var that = this;
				$.ajax({
					type:"get",
					url:"http://10.8.154.144:3000",
					data:{
						newVal:newVal
					},
					success:function(data){
						that.list = data;
					}
				})
			}
		}
	}
</script>

<style scoped lang="scss">
@import "~@/scss/main.scss";
#city{
	#city-header{
 	@include rect(100%, 0.53rem);
 	background-color: #1C2635;
 	.iconfont{
 		color:#B5B8BD;
 		float:left;
 		font-size: 24px;
 		margin:12px;
 	}
 	.title{
 		color:#fff;
 		float:left;
 		font-size:20px;
 		margin:14px 110px 0px;
 	}
 }
 #move{
	width:100%;
	height:200px;
	position: absolute;
	z-index: -1;
	padding: 10px 0;
}
 #searchtop{
	 	width:100%;
	 	height:50px;
	 	background: #F6F6F6;
	 	position: relative;
	 	#search{
	 		width:80%;
	 		height:40px;
	 		border-radius: 5px;
	 		margin:5px 10px;
	 		text-indent:30px ;
	 	}
	 	#btn{
	 		width:15%;
	 		height:40px;
	 		border-radius: 5px;
	 		margin:5px 10px;
	 		border:1px solid #fff;
	 		background:#F6F6F6;
	 		display:none;
	 	}
	 	.icon-sousuo{
	 		position: absolute;
	 		left:65px;
	 		top:14px;
	 	}
	 	#column{
	 		width:375px;
	 		height:20px;
	 		position:absolute;
	 		left:0;
	 		bottom:-16px;
	 	}
	 	ul{
	 		width:100%;
	 		background:#fff;
	 		overflow: hidden;
	 	}
	 }
	 
	#hotSerch{
		width:100%;
		margin-top:200px;
		a{
			font-size:16px;
			display:inline-block;
			margin:10px;
			padding:10px;
			border-radius: 5px;
			border:solid 1px #eee;
		}
	}
}
 
</style>